<template>
	<view
		class="content"
		:style="{ backgroundImage: `url(${site_config.front_background})` }"
		v-if="site_config">
		<u-navbar
			title="秀宴"
			@rightClick="rightClick"
			:autoBack="true"
			placeholder
			:titleStyle="titleStyle">
		</u-navbar>
		<!-- <status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar> -->
		<view class="Box">
			<scroll-view scroll-y="true" class="scrollView" @scroll="Scroll">
				<movable-area
					class="movable-area"
					:style="{ height: 1296 + 'rpx' }"
					:scale-area="true">
					<movable-view
						class="movable-view"
						:out-of-bounds="false"
						direction="all"
						:scale="true"
						:scale-min="1"
						:scale-value="scaleValue"
						:disabled="Disabled"
						@scale="scaleView">
						<view
							class="list"
							v-for="(item, index) in site_location"
							:key="index"
							:style="{
								width: item.width + 'rpx',
								height: item.height + 'rpx',
								left: item.x + 'rpx',
								top: item.y + 'rpx',
							}"
							@click="selectTab(item)">
							<image
								:src="$imgUrls(item.choose_log)"
								class="list_img"
								v-if="item.select == 1"></image>
							<block v-else>
								<image
									:src="$imgUrls(item.empty_log)"
									class="list_img"
									v-if="item.order_state == 0 || item.order_state == 2"></image>
								<image
									:src="$imgUrls(item.order_log)"
									class="list_img"
									v-if="item.order_state == 1">
								</image>
							</block>
						</view>

						<image
							:src="$imgUrls(site_bao_fang.img)"
							mode="widthFix"
							class="rows"></image>
					</movable-view>
				</movable-area>
			</scroll-view>
			<!-- 	<view class="box_Tip">
				<view class="box_Tip_list">
					<view class="type_config" v-for="(item, index) in type_config" :key="item.id">
						<image
							:src="$imgUrls(item.empty_log)"
							class="type_config_log m-right4"></image>
						<text class="type_config_name m-">{{ item.type_name }}</text>
					</view>
				</view>
			</view> -->
		</view>

		<view class="footer">
			<view class="d-flex a-center padding20" @click="$common.Tel(site_bao_fang.tel)">
				<text class="black size32">{{ site_bao_fang.text }}</text>
				<text class="color_d85 size32 bold">{{ site_bao_fang.tel }}</text>
			</view>
		</view>

		<u-modal
			:show="show"
			title="温馨提示"
			:content="site_config.tel_desc"
			:closeOnClickOverlay="true"
			confirmText="立即联系"
			confirmColor="#e0bb71"
			@close="show = false"
			@confirm="Confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scaleValue: 1,
				details: '',
				id: '',
				type_config: [],
				site_config: '',
				site_location: [],
				selectArr: [],
				Disabled: true,
				priceObj: '',
				show: false,
				site_bao_fang: '',
				titleStyle: {
					fontWeight: 'bold',
				},
			};
		},
		onLoad(opt) {
			if (opt.id) this.id = opt.id;
			this.getSiteTimeDetail();
		},

		methods: {
			getSiteTimeDetail() {
				this.$showLoading('');
				this.$http
					.get({
						url: '/SiteApi/getSiteTimeDetail',
						data: {
							id: this.id,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						const Result = res.data;
						this.details = Result;
						this.site_bao_fang = Result.site_bao_fang;
						this.site_config = Result.site_config;
						// Result.site_location.forEach((item) => {
						// 	item.width = Math.round(Number(Result.site_config.width));
						// 	item.height = Math.round(Number(Result.site_config.height));
						// 	item.x = Math.round(Number(item.x));
						// 	item.y = Math.round(Number(item.y));
						// 	let userItem = Result.type_config.find((n) => n.id == item.site_type);
						// 	if (userItem) {
						// 		item.empty_log = userItem.empty_log;
						// 		item.choose_log = userItem.choose_log;
						// 		item.order_log = userItem.order_log;
						// 		item.type_name = userItem.type_name;
						// 	}
						// });
						this.site_location = Result.site_location;
						this.type_config = Result.type_config || [];
					});
			},
			selectTab(item) {
				if (this.scaleValue == 1) this.scaleValue = 1.5;
				if (item.order_state == 1) return this.$Toast('该座位已被预约，请重新选择');
				if (item.order_state == 2) return;
				if (item.tel == 1) return (this.show = true);
				const Flag = this.containsObjectWithData(this.selectArr, 'id', item.id);
				const Index = this.site_location.findIndex((n) => n.id == item.id);
				if (Flag) {
					const selectIndex = this.selectArr.findIndex((n) => n.id == item.id);
					this.selectArr.splice(selectIndex, 1);
					this.site_location[Index].select = 0;
				} else {
					this.selectArr.push(item);
					this.site_location[Index].select = 1;
				}
				if (this.selectArr.length) this.getSitePriceInfo();
			},

			getSitePriceInfo() {
				let site_ids = [];
				this.selectArr.forEach((item) => {
					site_ids.push(item.id);
				});
				this.$http
					.get({
						url: '/SiteApi/getSitePriceInfo',
						data: {
							site_id: site_ids.join(','),
							time_id: this.id,
						},
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg);
						const Result = res.data;
						this.priceObj = Result;
					});
			},

			chooseSite() {
				if (!this.selectArr.length) return;
				this.$showLoading('座位锁定中~');
				let site_ids = [];
				this.selectArr.forEach((item) => {
					site_ids.push(item.id);
				});
				this.$http
					.post({
						url: '/SiteApi/chooseSite',
						data: {
							site_id: site_ids.join(','),
							time_id: this.id,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						if (res.data) this.toUrl(`orderDetails?order_id=${res.data}`);
					});
			},

			scaleView(e) {
				const scale = e.detail.scale;
				scale > 1 ? (this.Disabled = false) : (this.Disabled = true);
			},
			Scroll(e) {
				// console.log(e,'1');
			},

			containsObjectWithData(objects, key, value) {
				return objects.some((obj) => obj[key] === value);
			},

			Confirm() {
				this.$common.Tel(this.site_config.tel);
			},
		},

		computed: {
			bgImgHeight() {
				if (!this.site_config) return;
				return Math.round(Number(this.site_config.img_h));
				// return Math.round(Number(this.site_config.img_h) * 0.81);
				// return Math.round(Number(this.site_config.img_h));
			},
		},
		watch: {
			scaleValue(newVal, oldVal) {
				if (newVal && newVal > 1) {
					this.Disabled = false;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background-size: cover;
		background-position: center;
		padding: 50rpx 0 200rpx 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		// background-color: #4a3721;
	}

	.Box {
		width: 750rpx;
		// width: 611rpx;
		height: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		background-size: 100% 100%;
		background-position: center;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
	}

	.box_Ten {
		width: 540rpx;
		// flex:1;
		margin: 80rpx auto 0;
		overflow: scroll;
		position: relative;
		text-align: center;
	}

	.scrollView {
		width: 750rpx;
		// width: 612rpx;
		// height: 80%;
		// margin: 60rpx auto 0;
		z-index: 9999;
	}

	.Tanine {
		width: 100%;
	}

	.Tanine_in {
		width: 100%;
		height: 1000rpx;
	}

	.movable-area {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		z-index: 8988;
	}

	.movable-view {
		width: 100%;
		height: 100%;
	}

	.list {
		position: absolute;
		z-index: 10;
	}

	.list_img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.boxBgimg {
		width: 750rpx;
		height: 1349rpx;
	}

	// .boxBgimg{
	// 	width:750rpx;
	// 	height:1349rpx;
	// }

	.box_Tip {
		// width: 100%;
		// width: 450rpx;
		// height: 20%;

		// position: absolute;
		// bottom: 40rpx;
		// left: 30rpx;

		// z-index: 10000;
		width: 100%;
		// height: 20%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.box_Tip_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10rpx;
	}

	.type_config {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		margin: 10rpx 20rpx;
	}

	.type_config_log {
		width: 28rpx;
		height: 28rpx;
		display: inline-block;
	}

	.type_config_name {
		font-size: 22rpx;
		margin-left: 4rpx;
		display: inline-block;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		padding: 60rpx 30rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.details {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000;
	}

	.details_txt {
		font-size: 22rpx;
	}

	.open_time {
		margin: 0 8rpx;
	}

	.Make_btn {
		width: 100%;
		height: 70rpx;
		background-color: #b99866;
		color: #fff;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	.tableList {
		background-color: #b99866;
		padding: 4rpx 8rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
		display: inline-block;
	}

	.tableList_name {
		color: #fff;
		font-size: 24rpx;
	}

	.Givemoney {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.MoneyBox {
		display: flex;
		flex-direction: column;
	}

	.Earnest {
		color: #a70c09;
		font-size: 22rpx;
		margin-right: 4rpx;
	}

	.EarnestMoney {
		color: #a70c09;
		font-size: 34rpx;
		font-weight: bold;
	}

	.Copewith {
		color: #000;
		font-size: 22rpx;
		margin-right: 4rpx;
	}

	.CopewithMoney {
		color: #000;
		font-size: 28rpx;
		padding-left: 4rpx;
	}

	.continum {
		width: 260rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
		border-radius: 35rpx;
		background-color: #b99866;
		border: 4rpx solid #fef2dd;
	}
</style>